<template>
  <div class="mine">
    <el-descriptions  direction="vertical" :column="4" border>
  <el-descriptions-item label="用户名">{{userInfo.username}}</el-descriptions-item>
    <el-descriptions-item label="昵称">{{userInfo.nickname}}</el-descriptions-item>
  <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{userInfo.sex}}</el-descriptions-item>
      <el-descriptions-item label="国家">{{userInfo.country}}</el-descriptions-item>
      <el-descriptions-item label="省份">{{userInfo.province}}</el-descriptions-item>
  <el-descriptions-item label="城市">{{userInfo.city}}</el-descriptions-item>
    <el-descriptions-item label="vip等级">{{userInfo.vipLevel}}</el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-tag size="small">学校</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
  </div>
</template>

<script>
/*  <!-- 上面的这一块 -->
    <div class="top">
      <!-- 上左的这一块 -->
      <div class="top_left">
        <div class="top_left_top">
          
        </div>
        <div class="top_left_bottom"></div>
      </div>
      <!-- 上右的这一块 -->
      <div class="top_right">
        <!-- 上右上 -->
        <div class="top_right_top">
          <!-- 上右上左 -->
          <div class="top_right_top_left"></div>
          <!-- 上右上右 -->
          <div class="top_right_top_right"></div>
        </div>
        <!-- 上右下 -->
        <div class="top_right_bottom"></div>
      </div>
    </div>
    <!-- 下面的这一块 --> */
    // <div class="bottom"></div>
    
export default {
  data () {
    return {
      userInfo:{}
    }
  },
  created(){
    this.userInfo = JSON.parse(localStorage.getItem('qf-userInfo'))
    // console.log(this.userInfo);
  }
};
</script>

<style scoped>
.mine{
  padding-top: 20px;
}
el-descriptions-item{
  height: 50px;
  width: 200px;
}
</style>
